<template>
    <div>
        <h1 class="title">水果零兽管理系统</h1>
        <div class="login-container">

            <h2 class="title">欢迎注册</h2>

            <el-form ref="registerForm" :model="form" label-width="80px" :rules="rules">
                <el-form-item prop="username" label="用户名">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="password2" label="确认密码">
                    <el-input type="password" v-model="form.password2" placeholder="请再次输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="姓名">
                    <el-input v-model="form.name" placeholder="请输入姓名" ></el-input>
                </el-form-item>
                <el-form-item prop="telephone" label="手机号">
                    <el-input v-model="form.telephone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="button" type="primary" @click="onSubmit">注册</el-button>
                </el-form-item>
                <router-link to='/login' style="text-decoration: none">
                    <a class="register-title">
                        <span style="color: gray;" >已有账号？</span>
                        <span style="color: gray;">去登录</span>
                    </a>
                </router-link>
            </el-form>
        </div>
    </div>

</template>

<script>
    import {register} from "../api/require";
    import {validatePhone} from "../utils/util";

    export default {
        name: "Register",
        data() {
            return {
                form: {
                    name: '',
                    username: '',
                    password:'',
                    telephone:'',

                },
                rules: {
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    password2: [{ validator:this.validatePassWord,required:true, trigger: 'blur' }],
                    username: [{ required: true, message: '请输入用户名',required:true, trigger: 'blur' }],
                    telephone: [{  validator: validatePhone,required:true, trigger: 'blur' }],
                },
            }
        },
        methods: {
            onSubmit() {
                this.$refs.registerForm.validate((valid)=>{
                    if (valid){
                        console.log("通过")
                        register(this.form).then(res=>{
                            if (res.data.code === 500){
                                        this.$message({message:res.data.message,type:"error"});
                                        this.form = {}
                                    }else if (res.data.code === 200){
                                        this.$message({message:res.data.message,type:"success"});
                                        this.form = {}
                                    }
                        }).catch(err=>{
                            this.$message({message:"系统有误",type:"error"});
                            this.form = {}
                        })

                    }else{
                        this.$message("数据格式有误")
                        this.form = {}
                    }
                });
            },
            //电弧号码验证

            //验证密码
            validatePassWord (rule, value, callback)  {
                if (!value) {
                    callback(new Error('请再次输入密码'));
                } else if(value!== this.form.password){
                    callback(new Error('两次输入密码不一样'));
                }else {
                    callback();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .title{
        text-align: center;
    }
    .login-container{
        width: 35%;
        height: 470px;
        padding: 20px 20px;
        margin: 80px auto;
        background: #96b1e8;
        border-radius: 20px;

        .button{
            width: 100%;
        }
        .register-title{
            display: block;
            text-align: center;
            text-decoration: none;
        }
    }
</style>
